<template>
  <div class="luckDraw systemOfW">
    <homeHeader></homeHeader>
    <div class="luckFlop">
      <div class="logoImg">
        <img :src="titleLogoImg" alt="">
      </div>
      <div class="luckFlopBox relative">
        <div class="luckFlopTitle">
          <P @click="startGame">{{startBtnTxt}}</P>
          <p v-if="!isLogin">亲，您还未登录</p>
          <P v-if="isLogin">您还有<span>{{luckDrawCount}}</span>次开奖机会</P>
        </div>
        <div class="brandList relative">
          <div class="brandListItem viewport-flip"
               :class="{start:animateStatus==1,excessive:animateStatus==2,end:animateStatus==3,transitionCla:animateStatus>=1&&animateStatus<=3}"
               v-for="(v,brandListIndex) in 10" @click="selectBrandEvent(brandListIndex)">
            <div class="noWinBox flip out" v-show="!isWin"></div>
            <div class="brandBack flip"></div>
            <div class="winBox flip out" v-show="isWin">
              <div class="winTxtBox">
                <p><span>{{winMoney}}</span>元</p>
                <p>彩金红包</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rewardHistory">
      <div class="rewardHistoryBox headerTopMain clearFiex relative">
        <div class="winRecord floatLeft">
          <div class="historyBoxTitle">我的中奖记录</div>
          <div class="winRecordList">
            <vue-seamless-scroll :data="winRecListData" :class-option="classOption" class="vueSeamless">
              <ul id="marquee">
                <li class="winRecListItem relative" v-for="winRecListItem in winRecListData">
                  <p>{{winRecListItem.username}}</p>
                  <p>{{_Util.formatDateTime(winRecListItem.drawTime,1)}}</p>
                  <p>{{winRecListItem.winAmount}} 元彩金</p>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="gameRule floatRight">
          <div class="historyBoxTitle">活动规则</div>
          <div class="gameRuleCon">
            <div class="gameRuleInfo">
              <p>{{gameRuleInfo}}</p>
            </div>
            <ul class="gameRuleTabUl">
              <li class="gameRuleTab displayFlex">
                <p>累积充值</p>
                <p></p>
                <p>翻牌机会</p>
                <p></p>
              </li>
              <li class="gameRuleTab displayFlex" v-for="gameRuleItem in gameRuleData">
                <p>{{gameRuleItem.totalRechargeAmount}}元</p>
                <p></p>
                <p>{{gameRuleItem.number}}次</p>
                <p></p>
              </li>
            </ul>
          </div>
        </div>
        <div class="playCount" v-if="isLogin">您还有<span>{{luckDrawCount}}</span>次机会</div>
      </div>
    </div>
    <homeFooter></homeFooter>
  </div>
</template>

<script>
  import './main.scss';
  import {mapState} from 'vuex';
  import homeHeader from '../../../components/lotteryColor/header/index';
  import homeFooter from '../../../components/footer/index';
  
  export default {
    data() {
      return {
        titleLogoImg: require('../../../assets/images/luckDraw/titleLogo.png'),
        winRecListData: [],//中奖列表数据
        gameRuleData: [],//抽奖次数规则
        gameRuleInfo: '',//抽奖规则说明
        startBtnTxt: '开 始 游 戏',//开始游戏文案
        isLogin: false,//登录状态
        isWin: false,//是否中奖
        singleHeight: 30,
        luckDrawCount: 0,//剩余抽奖次数
        winMoney: 0,//中奖金额
        intervalLock: false,//
        isRiffle: false,//是否洗过牌
        isSelectCard: false,//是否选中卡片
        brandLisCurIndex: 'a',//卡片当前选中下标
        animateStatus: '',//游戏动画状态 1:开始 2:洗牌 3:结束
        endAnimateId:null,
        riffleId:null,
        endBrandId:null,
      }
    },
    computed: {
      ...mapState({
        loginStatu: state => state.mutations.loginStatus, //登录状态
      }),
      classOption() {
        return {
          step: 1,
          limitMoveNum: 10,
          singleHeight: this.singleHeight,
          waitTime: 1000,
          direction: 1,
          hoverStop: true, //是否开启鼠标悬停stop
        }
      },
    },
    mounted() {
      this.initData();
    },
    activated() {
      this.init();
    },
    deactivated() {
    },
    methods: {
      init() {
        this.initData();
        //获取抽奖规则
        this.getLuckyRules();
        //获取中奖记录
        this.getDrawRecord();
      },
      initData() {
        this.singleHeight = parseInt($(".winRecordList").height() / 10);
        this.isLogin = (this.loginStatu && this._Util.getItem('loginStatus')) || false;
        this.startBtnTxt = '开 始 游 戏';
        this.clearCardStatus();
      },
      clearCardStatus() {
        this.isRiffle = false;
        this.intervalLock = false;
        this.isSelectCard = false;
        this.initRiffle();
      },
      //获取抽奖规则
      getLuckyRules() {
        let that = this;
        that._Util.post(that, that._Api.GET_LUCKY_RULES, {}, (data) => {
          that.gameRuleData = data.rules || [];
          that.gameRuleInfo = data.description || '';
        });
      },
      //获取中奖记录
      getDrawRecord() {
        let that = this;
        let params = {
          pageNum: 1,
          pageSize: 20
        }
        that._Util.post(that, that._Api.GET_LUCKY_RECORDS, params, (data) => {
          that.winRecListData = data.winRecords.result || [];
          that.luckDrawCount = data.numbers || '0';
        }, '', '', true);
      },
      //翻牌抽奖
      promitDrawInfo(callBack) {
        let that = this;
        that._Util.post(that, that._Api.GET_LUCKY_DRAW, {}, (data) => {
          callBack && callBack(data);
        }, (data) => {
          this._Util.showAlert(data.mag);
        }, 'post', true);
      },
      //卡片选中事件
      selectBrandEvent(index) {
        let that = this;
        if (!this.isRiffle) return;
        if (this.intervalLock) return;
        for (let i = 0; i < $(".brandListItem").length; i++) {
          if ($(".brandBack").eq(i).hasClass("out")) {
            this.isSelectCard = true;
            return false;
          } else {
            this.isSelectCard = false;
          }
        }
        if (this.isSelectCard) return;
        that.promitDrawInfo((data) => {
          that.luckDrawCount--;
          that.isWin = data.status == '1' ? true : false;
          if (data.status == '1') {
            that.getDrawRecord();
          }
          that.winMoney = data.amount;
          that.startBtnTxt = '开 始 游 戏';
          that.startFlop(index);
        });
        
      },
      //开始翻牌动画
      startFlop(index) {
        if (this.winMoney > 0) {
          if (!$(".brandBack").eq(index).hasClass('out')) {
            $(".brandBack").eq(index).removeClass("in").addClass("out");
            setTimeout(() => {
              $(".winBox").eq(index).removeClass("out").addClass("in");
            }, 225);
          }
        } else {
          if (!$(".brandBack").eq(index).hasClass('out')) {
            $(".brandBack").eq(index).removeClass("in").addClass("out");
            setTimeout(() => {
              $(".noWinBox").eq(index).removeClass("out").addClass("in");
            }, 225);
          }
        }
      },
      //初始化翻牌(背面朝上)
      initRiffle() {
        for (let i = 0; i < $(".brandListItem").length; i++) {
          setTimeout(() => {
            $(".brandBack").eq(i).removeClass("out").addClass("in");
          }, 225);
          $(".noWinBox").eq(i).removeClass("in").addClass("out");
          $(".winBox").eq(i).removeClass("in").addClass("out");
        }
        this.animateStatus = '';
        clearInterval(this.riffleId);
        clearInterval(this.endBrandId);
        clearInterval(this.endAnimateId);
      },
      //开始游戏
      startGame() {
        let that = this;
        if (!this.isLogin) {
          that._Util.showAlert('未登录');
          setTimeout(() => {
            that.$router.push({name: 'login', query: {stateId: 1}});
          }, 1600);
          return;
        }
        if (that.luckDrawCount <= 0) {
          that._Util.showAlert('您的抽奖次数已用完');
          return;
        }
        if (that.intervalLock) return;
        this.clearCardStatus();
        //开始-收牌
        that.animateStatus = 1;
        that.intervalLock = true;
        that.startBtnTxt = '洗牌中...';
        //洗牌
        that.riffleId = setTimeout(() => {
          that.animateStatus = 2;
        }, 1200);
        //收牌
        that.endBrandId = setTimeout(() => {
          that.initRiffle();
          that.endAnimate();
        }, 4200);
      },
      //发牌动画
      endAnimate() {
        let that = this;
        that.animateStatus = 3;
        that.endAnimateId = setTimeout(() => {
          that.intervalLock = false;
          that.isRiffle = true;
          that.startBtnTxt = '请 翻 牌';
        }, 1100);
      },
    },
    components: {
      homeHeader,
      homeFooter
    },
    watch: {
      'loginStatu'() {
        this.initData();
      }
    }
  }
</script>

<style lang="css" rel="styleheet/css" scoped>

</style>